<template>
  <div class="address">
    <div class="address-wrapper">
      <mt-index-list>
        <mt-index-section class="top-box" index="">
          <mt-cell class="top" title="">
            <div class="top-cell">
              <div class="new-friend" @click="newFriend">
                <img src="../../assets/address/新的朋友.png" />
                <span>新的朋友</span>
              </div>
              <div class="new-friend" @click="warn">
                <img src="../../assets/address/群聊.png" />
                <span>群聊</span>
              </div>
              <div class="new-friend" @click="warn">
                <img src="../../assets/address/标签.png" />
                <span>标签</span>
              </div>
              <div class="new-friend" @click="warn">
                <img src="../../assets/address/公众号.png" />
                <span>公众号</span>
              </div>
            </div>
          </mt-cell>
        </mt-index-section>
        <mt-index-section
          v-for="(item, index) in personnelList"
          :key="item.id"
          :index="item.group"
        >
          <mt-cell
            class="address-item"
            v-for="info in item.info"
            :key="info.id"
            :title="info.dissname"

          >
            <div class="mt-cell-wrapper" @click="gotoDetail(info)">
              <img v-lazy="info.imgurl" height="40" width="40" />
            </div>
          </mt-cell>
        </mt-index-section>
      </mt-index-list>
    </div>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  import { IndexList, IndexSection, Toast, MessageBox } from 'mint-ui'
  import {mapMutations} from 'vuex'

  export default {
    components: {
      IndexList,
      IndexSection,
      Toast,
      MessageBox
    },
    created () {
      // console.log(this.personnelList)
    },
    methods: {
      gotoDetail (info) {
        // console.log('测试')
        this.$router.push({
          path: `/address/${info.dissid}`
        })
        this.setAddress(info)
      },
      ...mapMutations({
        setAddress: 'SET_INFO'
      }),
      newFriend () {
        this.$toast({
          message: '没有新的朋友',
          duration: 1500
        })
      },
      warn () {
        MessageBox({
          title: '提示',
          message: '尚未开发，还是和下面的人聊聊天吧',
          showCancelButton: true
        })
      }
    },
    data () {
      return {
        personnelList: [
          {
            group: 'C',
            info: [
              {
                dissname: '蔡徐坤',
                dissid: '坤坤',
                phone: '18312345678',
                imgurl: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2855044802,2008171980&fm=58&bpow=1200&bpoh=1714',
                location: '魏国 洛阳',
                album: [
                  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=197815656,1553775126&fm=27&gp=0.jpg',
                  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3481717231,3998051829&fm=27&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '陈立农',
                dissid: '农农',
                phone: '18312345678',
                imgurl: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=908886857,1297680048&fm=58&bpow=416&bpoh=609',
                location: '魏国 洛阳',
                album: [
                  'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=365365072,2201212741&fm=111&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '陈乔恩',
                dissid: '乔恩',
                phone: '18312345678',
                imgurl: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3287845273,763329235&fm=58&bpow=600&bpoh=740',
                location: '魏国 洛阳',
                album: [
                  'https://wx4.sinaimg.cn/mw690/66134906ly1fqa31kbmdoj23vc2kwb2e.jpg'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '陈赫',
                dissid: '陈赤赤',
                phone: '18312345678',
                imgurl: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=543620062,2639273409&fm=58&bpow=750&bpoh=1125',
                location: '魏国 洛阳',
                album: [
                  'https://wx1.sinaimg.cn/mw690/5ddbc59dly1fsuj12x3pfj218g0tnn5o.jpg'
                ],
                source: '通过二维码添加'
              },
              {
                dissname: '陈学冬',
                dissid: '东东',
                phone: '18312345678',
                imgurl: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3836451806,1238950320&fm=58&bpow=500&bpoh=713',
                location: '魏国 洛阳',
                album: [
                  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1712853724,3258809628&fm=27&gp=0.jpg'
                ],
                source: '通过二维码添加'
              }
            ]
          },
          {
            group: 'D',
            info: [
              {
                dissname: '董力',
                dissid: '董大力',
                phone: '18312345678',
                imgurl: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3179396042,1741270844&fm=58&bpow=1280&bpoh=1920',
                location: '东汉',
                album: [
                  'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2461983994,1018769459&fm=111&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '迪丽热巴',
                dissid: '小迪',
                phone: '18312345678',
                imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1812610176,882127119&fm=58&bpow=640&bpoh=820',
                location: '东汉',
                album: [
                  'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2388057092,36394663&fm=179&app=42&f=JPEG?w=115&h=161'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '邓伦',
                dissid: '邓伦',
                phone: '18312345678',
                imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2980592991,2084522472&fm=58&bpow=416&bpoh=416',
                location: '东汉',
                album: [
                  'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=117965265,1829678764&fm=179&app=42&f=JPEG?w=115&h=161'
                ],
                source: '通过搜索手机号添加'
              }
            ]
          },
          {
            group: 'F',
            info: [
              {
                dissname: '范丞丞',
                dissid: '范丞丞',
                phone: '18312345678',
                imgurl: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=286799983,4283705264&fm=58&bpow=532&bpoh=800',
                location: '蜀国',
                album: [
                  'https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=943827290,103217253&fm=85&s=439819C5D23763964CB124BF0300C002'
                ],
                source: '通过搜索手机号添加'
              }
            ]
          },
          {
            group: 'H',
            info: [
              {
                dissname: '黄景瑜',
                dissid: '鲸鱼',
                phone: '18312345678',
                imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=467768343,1640436897&fm=58&bpow=500&bpoh=673',
                location: '蜀国',
                album: [
                  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=395866324,624687344&fm=27&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              }
            ]
          },
          {
            group: 'L',
            info: [
              {
                dissname: '李东阳',
                dissid: '东阳',
                phone: '18312345678',
                imgurl: 'https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=4000274609,1424842444&fm=85&s=23B01B8D9623CBE5141860CB03001020',
                location: '蜀国 成都',
                album: [
                  'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=76192063,2216469146&fm=85&s=33D234CC6AE8937850C58C9503007083'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '鹿晗',
                dissid: '小鹿',
                phone: '18312345678',
                imgurl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3285641468,3911469699&fm=27&gp=0.jpg',
                location: '蜀国 成都',
                album: [
                  'https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=1158421572,371395097&fm=85&s=FCC2BE1F07534BC2184938E90300A038'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '刘昊然',
                dissid: '昊然',
                phone: '18312345678',
                imgurl: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1949604616,3181815274&fm=111&gp=0.jpg',
                location: '蜀国 成都',
                album: [
                  'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1617181226,3704218259&fm=27&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              }
            ]
          },
          {
            group: 'O',
            info: [
              {
                dissname: '欧阳娜娜',
                dissid: '欧阳娜娜',
                phone: '18312345678',
                imgurl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1249856315,3701232931&fm=27&gp=0.jpg',
                location: '东吴',
                album: [
                  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1543257436,650758208&fm=27&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              }
            ]
          },
          {
            group: 'P',
            info: [
              {
                dissname: '彭昱畅',
                dissid: '彭彭',
                phone: '18312345678',
                imgurl: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2050837457,2724659723&fm=58&bpow=3024&bpoh=4536',
                location: '东吴',
                album: [
                  'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2286593554,3632833069&fm=85&app=2&f=JPEG?w=121&h=75&s=E4B9CE7810236F052030415E0300B0D2'
                ],
                source: '通过搜索手机号添加'
              }
            ]
          },
          {
            group: 'S',
            info: [
              {
                dissname: '宋茜',
                dissid: 'songqian',
                phone: '18312345678',
                imgurl: 'https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=2567089023,3590138280&fm=85&s=71908C733CF3D690440015C70100C0A3',
                location: '东吴',
                album: [
                  'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1293498969,2140795930&fm=58&bpow=848&bpoh=1045'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '宋祖儿',
                dissid: 'songzuer',
                phone: '18312345678',
                imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2191550709,351263040&fm=58&bpow=690&bpoh=1035',
                location: '东吴',
                album: [
                  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2069949388,2463633175&fm=27&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              }
            ]
          },
          {
            group: 'W',
            info: [
              {
                dissname: '王一博',
                dissid: '一搏',
                phone: '18312345678',
                imgurl: 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=ab9143bada43ad4bb2234e92e36b31ca/f703738da9773912c1b93b7ef3198618367ae216.jpg',
                location: '蜀国',
                album: [
                  'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2038224171,1211078201&fm=58&bpow=1920&bpoh=1920'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '王嘉尔',
                dissid: 'Jackson',
                phone: '18312345678',
                imgurl: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=779687824,941453167&fm=58&bpow=660&bpoh=917',
                location: '蜀国',
                album: [
                  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4232998451,3407777843&fm=111&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '王博文',
                dissid: 'wangbowen',
                phone: '18312345678',
                imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3239128386,3574411913&fm=58&bpow=1222&bpoh=1876',
                location: '蜀国',
                album: [
                  'https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=3061287893,2517589590&fm=85&s=FD071F747FC24B641A5C60CA0300E0B2'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '王俊凯',
                dissid: '小凯',
                phone: '18312345678',
                imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3004132320,2530340211&fm=58&bpow=800&bpoh=1066',
                location: '蜀国',
                album: [
                  'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4112011362,4114944890&fm=111&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '王源',
                dissid: '小源',
                phone: '18312345678',
                imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2772836787,3048852030&fm=58&bpow=1691&bpoh=1676',
                location: '蜀国',
                album: [
                  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2134826033,1637789905&fm=27&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              }
            ]
          },
          {
            group: 'X',
            info: [
              {
                dissname: '肖战',
                dissid: '有钱哥哥',
                phone: '18312345678',
                imgurl: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2314071805,1801582140&fm=58&bpow=600&bpoh=774',
                location: '吴国',
                album: [
                  'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=268230756,2973736325&fm=27&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '谢娜',
                dissid: '娜娜',
                phone: '18312345678',
                imgurl: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1018068551,116194820&fm=58&bpow=567&bpoh=709',
                location: '吴国',
                album: [
                  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1799718861,1636020604&fm=27&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              }
            ]
          },
          {
            group: 'Y',
            info: [
              {
                dissname: '杨幂',
                dissid: '大幂幂',
                phone: '18312345678',
                imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2861379516,2150088832&fm=58&bpow=640&bpoh=820',
                location: '东汉',
                album: [
                  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1145462565,3995615030&fm=27&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '杨颖',
                dissid: 'angelababy',
                phone: '18312345678',
                imgurl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3243950452,2315612185&fm=27&gp=0.jpg',
                location: '魏国',
                album: [
                  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3854271833,3889893491&fm=27&gp=0.jpg'
                ],
                source: '通过扫一扫添加'
              },
              {
                dissname: '易烊千玺',
                dissid: '千玺',
                phone: '18312345678',
                imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1906086450,2147277754&fm=58&bpow=1600&bpoh=2000',
                location: '魏国',
                album: [
                  'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1082253917,3428907548&fm=111&gp=0.jpg'
                ],
                source: '通过扫一扫添加'
              }
            ]
          },
          {
            group: 'Z',
            info: [
              {
                dissname: '赵思露',
                dissid: '露露',
                phone: '18312345678',
                imgurl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=384904244,1820659264&fm=27&gp=0.jpg',
                location: '蜀国',
                album: [
                  'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2719582599,3611659140&fm=27&gp=0.jpg'
                ],
                source: '通过搜索手机号添加'
              },
              {
                dissname: '郑爽',
                dissid: '小爽',
                phone: '18312345678',
                imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1799687187,1418476310&fm=58&bpow=512&bpoh=768',
                location: '魏国',
                album: [
                  'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3482616288,1888117320&fm=27&gp=0.jpg'
                ],
                source: '通过扫一扫添加'
              },
              {
                dissname: '郑凯',
                dissid: '小猎豹',
                phone: '18312345678',
                imgurl: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4002714401,4153362481&fm=58&bpow=1438&bpoh=1920',
                location: '蜀国',
                album: [
                  ''
                ],
                source: '通过扫一扫添加'
              }
            ]
          }
        ]
      }
    }
  }
</script>

<style scoped>
  .address{
    position: fixed;
    top: 50px;
    bottom: 50px;
    left: 0;
    right: 0;
    z-index: 2;
    overflow: scroll;
  }
  .top{
    height: 150px;
    padding-top: 0px;
  }
  .top-cell{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .new-friend{
    display: flex;
    left: 0;
    height: 20px;
    border-bottom: 1px solid rgba(153,153,153,0.4);
    padding: 8px 10px;
    align-items: center; /*定义body的元素垂直居中*/
    /*justify-content: center; 定义body的里的元素水平居中*/
  }
  .new-friend img{
    margin-right: 20px;
    height: 20px;
    width: 20px;
  }
  .address-list{
  }

  .address-item{
    /*border-bottom: 0.2px solid rgba(153,153,153,0.4);*/
    background-color: #fff;
    padding-left: 60px;
    height: 50px;
  }
  .mt-cell-wrapper{
    /*border: 1px solid red;*/
    position: absolute;
    left: 10px;
    top: 5px;
    width: 100%;
  }
  .address-item img{
    /*position: absolute;
    left: 10px;
    top: 5px;*/
  }

</style>
